﻿<%@ Page Title="" Language="C#" MasterPageFile="~/SiteDesign.master" AutoEventWireup="true" CodeFile="UpdateProgressDemo.aspx.cs" Inherits="AJAXDemos_UpdateProgressDemo" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <style type="text/css">
        .codeSample
        {
            font-family: "Courier New", Courier, monospace;
            font-size: smaller;
        }
        .hideLoading
        {
            display:none;
        }
        .showLoading
        {
            display: inherit;
        }
    </style>
    <script type="text/javascript" language="javascript" >
        function onUpdating() {
            //var loadingTag = $get('loadingSpan');
            //loadingTag.className = 'showLoading';
            loadingSpan.className = 'showLoading';
        }
        function onUpdated() {
            loadingSpan.className = 'hideLoading';
        }
    </script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="AboutDemoContent" Runat="Server">
    <h2>UpdatePanelAnimationExtender</h2>
    <div>The UpdatePanel along with the UpdatePanelAnimationExtender and a bit of Javascript can allow you to display an image to let the user know that a long-running server-side process is under way. This page offers a sample of just such an implentation.</div>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="DemoContent" Runat="Server">
    <div>
        <h2>Live Sample</h2>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:LinkButton ID="SubmitButton" runat="server" onclick="SubmitButton_Click">Submit Button</asp:LinkButton>
        &nbsp;<asp:Label ID="UpdateLabel" runat="server" Text="Before the update..."></asp:Label>
                &nbsp;<asp:LinkButton ID="ResetButton" runat="server" 
                    onclick="ResetButton_Click">(Reset)</asp:LinkButton>
        <span id="loadingSpan" class="hideLoading">
            <asp:Image ID="LoadingImage" runat="server" ImageUrl="~/Images/ajax-loader.gif" />
        </span>
            </ContentTemplate>
        </asp:UpdatePanel>
    
        <asp:UpdatePanelAnimationExtender ID="UpdatePanel1_UpdatePanelAnimationExtender" 
            runat="server" Enabled="True" TargetControlID="UpdatePanel1">
            <Animations>
                <OnUpdating>
                    <ScriptAction Script="onUpdating();" />
                </OnUpdating>
                <OnUpdated>
                    <ScriptAction Script="onUpdated();" />
                </OnUpdated>
            </Animations>
        </asp:UpdatePanelAnimationExtender>
        <hr />
        <h2>How to Use</h2>
        <p><img src="../Images/AddExtenderToUpdatePanel.png" alt="Add Extender" /></p>
        <p>To add an UpdatePanelAnimationExtender to your UpdatePanel, simply click the panel's smart tag and select "Add Extender...". Then, select the UpdatePanelAnimationExtender control.</p>
        <p>In order to make this extender work, I went to the source view of this page and added some Javascript and referenced it in the 
            &lt;Animations&gt;&lt;/Animations&gt; tag of the extender. Open the source for this page and 
            take a look.</p>
        <p><img src="../Images/UpdatePanelAnimationExtender.png" 
                alt="Update Panel Animation Extender" /></p>
    </div>
</asp:Content>

